<script setup>
import {get} from '../api/http'
import {ref, onMounted} from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import { menuStore } from '../utils/store';
import Beian from '../components/Beian.vue';
import { Search, View, Message, ChatSquare } from '@element-plus/icons-vue';

const blogList = ref([])
const currentNote = ref({})
const keyword = ref('')
const loading = ref(false)
const router = useRouter()
const total = ref(0)
const pageNum = ref(1)
const tagList = ref([])
const searchTagId = ref(null)


const getBlogList = () => {
    loading.value = true
    get('blog',{noteStatus:'public', keyword:keyword.value, pageNum: pageNum.value, pageSize:10, tagId: searchTagId.value}).then(res=>{
        if(res.status){
            blogList.value = res.data.list
            total.value = res.data.total
        }else{
            ElMessage({type:'error', message:res.msg})
        }
        loading.value = false;
    })
}

const getTagList = () => {
    get('tag').then(res=>{
        tagList.value = res.data.list
    })
}


const getBlogDetail = (note) => {
    currentNote.value = note
    router.push('/article/'+note.id)
}

const goPage = (num) => {
    pageNum.value = num
    getBlogList()
}

const searchByTag = () => {
    ElMessageBox.alert('抱歉，点击标签查看同类博文功能正在完善中……','提示',{type:'warning'})
}

onMounted(()=>{
    getBlogList()
    getTagList()
    menuStore.show=true
})

</script>
<template>
    <el-backtop :right="40" :bottom="40">
        <div style="font-size: 14px; width: 100%; height: 100%; background-color: #fff; color: var(--el-color-primary); text-align: center; padding: 5px;">
            回到顶部
        </div>
    </el-backtop>
    <main v-loading="loading" v-blog-title data-title="胡海龙 | 博客">
        <el-row justify="center">
            <el-col :lg="20" :md="20">
                <div class="toolBar">
                    <el-input clearable v-model="keyword" @keydown.enter="getBlogList" @clear="getBlogList" style="width:300px;" placeholder="博文搜索"></el-input>
                    <el-button type="primary" @click="getBlogList" plain :icon="Search" style="margin-left:5px; width:100px;">搜索</el-button>
                    <el-select filterable placeholder="选择标签" clearable @change="getBlogList" style="margin-left:10px;" v-model="searchTagId">
                        <el-option v-for="item in tagList" :key="item.id" :label="item.tagName" :value="item.id"></el-option>
                    </el-select>
                </div>
                <el-empty v-if="blogList.length == 0" description="暂无公开博文"></el-empty>
                <div class="card" v-for="item in blogList" :key="item.id" style="margin-bottom: 10px;">
                    <div class="blogTitle">
                        <h3 @click="getBlogDetail(item)" v-html="item.noteTitle"></h3>
                    </div>
                    <div class="blogDescribe">
                        <el-image :lazy="true" v-if="item.coverImage != null" style="width: 200px; margin-right: 10px;" :src="item.coverImage"></el-image>
                        <div style="width: calc(100% - 210px);" v-html="item.noteDescribe"></div>
                    </div>
                    <div class="blogFooter">
                        <div class="footer-item">{{ item.nickName }}</div>
                        <div class="footer-item">{{ item.updateTime }}</div>
                        <div class="footer-item"><el-icon style="padding-right:5px;"><View/></el-icon>{{ item.viewCount }}</div>
                        <div class="footer-item"><el-icon style="padding-right:5px;"><ChatSquare/></el-icon>{{ item.commentCount }}</div>
                        <span class="footer-item" v-for="tag in item.noteTagList" :key="tag.id" size="small" effect="plain">#{{ tag.tagName }}</span>
                    </div>
                </div>
                <el-pagination
                    style="margin-top:10px;"
                    small
                    background
                    layout="total, prev, pager, next"
                    :total="total"
                    @current-change="goPage"
                />
            </el-col>
        </el-row>
    </main>
    <Beian/>
</template>
<style scoped>
main{
    padding: 10px;
    min-height: calc(100vh - 110px);
    background-color: #F2F3F5;
    font-family: Arial, Helvetica, sans-serif
}
h3{
    cursor: pointer;
    color: var(--el-color-primary);
}
@keyframes shake {
    25%{margin-left:-10px}
    50%{margin-left:0px}
    75%{margin-left:10px;}
    100%{margin-left:0px}
}
.blogFooter{
    display: flex;
    align-items: center;
    font-size: 14px;
}
.footer-item{
    padding-right: 10px;
    color: #aaa;
    display: flex;
    align-items: center;
    font-size: 14px;
}
.bar{
    width: 100%;
    /* padding: 10px 32px; */
    margin-bottom: 10px;
    /* box-shadow: 3px 5px 10px #aaa; */
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(255,255,255,0.9);
}
.bar > .info {
    font-weight: bold;
    display: flex;
    align-items: center;
    padding: 5px 10px;
}
.previewPage{
    background-color: #fff;
}
.card{
    padding: 10px;
    background-color: #fff;
    position: relative;
    animation-name: slowShow;
}
.mark{
    width: 50px;
    height: 15px;
    border-radius: 44px;
    background-color: var(--el-color-info);
    padding: 5px 10px;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    color: #fff;
    text-align: center;
}
.ChatTitle{
    padding: 15px 0;
    display: flex;
    align-items: center;
}
.subChat{
    padding: 10px 5px 5px 40px;
}
.commentList{
    background-color: #fff;
    padding: 10px;
}
.commentItem{
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #aaa;
}
.mainChat{
    display: flex;
    align-items: center;
}
.tips{
    text-align: center;
    padding: 20px 0;
    /* font-weight: bold; */
    font-size: 16px;
}
.chatBox:deep(.el-textarea__inner){
    border: 1px solid var(--el-color-info);
}
.toolBar{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.blogDescribe{
    display: flex;
    flex-wrap: wrap;
}
</style>